<!DOCTYPE html>
<html lang="an">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title></title>
    <link rel="stylesheet" href="../css/login_style.css">
    <style scoped>
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: url("../img/img_1.png");
            background-size: cover;
        }

        .login-card {
            width: 400px;
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 40px;
            position: absolute;
        }

        .title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
        }

        .username-input .el-input {
            border-radius: 6px 6px 0px 0px;
        }

        .password-input .el-input {
            border-radius: 0px 0px 6px 6px;
        }

        .login-btn {
            width: 100%;
            border-radius: 6px;
            margin-top: 20px;
        }
        .login-title {
            /* 设置标题样式 */
            font-size: 50px;
            color: white;
            font-weight: bold;
            text-align: center;
            margin-top: -770px;
            position: relative;
        }

        .reg-btn {
            width: 100%;
            border-radius: 6px;
            margin-left: 20px;
            margin-top: 20px;

        }
        /*
        1. 在.login-container样式中添加background-image属性，设置背景图片的url。
        2. background-size属性可以设置背景图片的尺寸，cover表示自动缩放图片以便完全覆盖容器。
        3. 修改背景颜色为半透明白色，新增样式rgba(255, 255, 255, 0.9)，其中0.9表示透明度为90%。
        4. 其他样式不变。

        需要注意的是，背景图片的url需要使用正确的路径，如果是本地图片，可以使用相对路径或者绝对路径。
        */
    </style>
</head>
<body>
<div id="app">
    <template>

        <div class="login-container">
            <div class="login-title">欢迎使用个人事务管理系统</div>
            <div class="login-card">
                <h3 class="title">用户登录</h3>
                <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" class="form">
                    <el-form-item class="username-input" prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item class="password-input" prop="password">
                        <el-input v-model="loginForm.password" type="password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="login-btn" @click="submitForm">登录</el-button>
                        <el-button style="margin-left: 0" class="reg-btn" @click="gotoReg">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            submitForm() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        // 提交登录请求
                        // ...
                    }
                })
            },
            gotoReg() {
               location.href="reg.html";
            }

        }
    })
</script>
</html>